<template>
  <div>
    <!-- <div class="goodsbox" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="3"> -->
    <div class="goodsbox">
      <ul>
        <li class="boxlist">
          <router-link to @click.native="toplook()">
            <img src="http://static.ruitaowang.com/attached/file/2019/04/23/20190423174503180.jpg">
            <div>特尔特鹿血酒单支官方建议零售价121</div>
          </router-link>
          <router-link to class="bomrouter" @click.native="bomlook()">
            <div class="bomnew">
              <div>￥188</div>
              <br>
              <div class="bom_sun">原价:200</div>
            </div>
            <img src="../../assets/1_6.png">
          </router-link>
        </li>

        <li class="boxlist">
          <router-link to>
            <img src="http://static.ruitaowang.com/attached/file/2019/04/23/20190423174503180.jpg">
            <div>特尔特鹿血酒单支500</div>
          </router-link>
          <router-link to class="bomrouter">
            <div class="bomnew">
              <div>￥188</div>
              <br>
              <div class="bom_sun">原价:200</div>
            </div>
            <img src="../../assets/1_6.png">
          </router-link>
        </li>
        <li class="boxlist">
          <router-link to>
            <img src="http://static.ruitaowang.com/attached/file/2019/04/23/20190423174503180.jpg">
            <div>特尔特鹿血酒单支500</div>
          </router-link>
          <router-link to class="bomrouter">
            <div class="bomnew">
              <div>￥188</div>
              <br>
              <div class="bom_sun">原价:200</div>
            </div>
            <img src="../../assets/1_6.png">
          </router-link>
        </li>
        <li class="boxlist">
          <router-link to>
            <img src="http://static.ruitaowang.com/attached/file/2019/04/23/20190423174503180.jpg">
            <div>特尔特鹿血酒单支500</div>
          </router-link>
          <router-link to class="bomrouter">
            <div class="bomnew">
              <div>￥188</div>
              <br>
              <div class="bom_sun">原价:200</div>
            </div>
            <img src="../../assets/1_6.png">
          </router-link>
        </li>
          <li class="boxlist">
          <router-link to>
            <img src="http://static.ruitaowang.com/attached/file/2019/04/23/20190423174503180.jpg">
            <div>特尔特鹿血酒单支500</div>
          </router-link>
          <router-link to class="bomrouter">
            <div class="bomnew">
              <div>￥188</div>
              <br>
              <div class="bom_sun">原价:200</div>
            </div>
            <img src="../../assets/1_6.png">
          </router-link>
        </li>
          <li class="boxlist">
          <router-link to>
            <img src="http://static.ruitaowang.com/attached/file/2019/04/23/20190423174503180.jpg">
            <div>特尔特鹿血酒单支500</div>
          </router-link>
          <router-link to class="bomrouter">
            <div class="bomnew">
              <div>￥188</div>
              <br>
              <div class="bom_sun">原价:200</div>
            </div>
            <img src="../../assets/1_6.png">
          </router-link>
        </li>
          <li class="boxlist">
          <router-link to>
            <img src="http://static.ruitaowang.com/attached/file/2019/04/23/20190423174503180.jpg">
            <div>特尔特鹿血酒单支500</div>
          </router-link>
          <router-link to class="bomrouter">
            <div class="bomnew">
              <div>￥188</div>
              <br>
              <div class="bom_sun">原价:200</div>
            </div>
            <img src="../../assets/1_6.png">
          </router-link>
        </li>
          <li class="boxlist">
          <router-link to>
            <img src="http://static.ruitaowang.com/attached/file/2019/04/23/20190423174503180.jpg">
            <div>特尔特鹿血酒单支500</div>
          </router-link>
          <router-link to class="bomrouter">
            <div class="bomnew">
              <div>￥188</div>
              <br>
              <div class="bom_sun">原价:200</div>
            </div>
            <img src="../../assets/1_6.png">
          </router-link>
        </li>
          <li class="boxlist">
          <router-link to>
            <img src="http://static.ruitaowang.com/attached/file/2019/04/23/20190423174503180.jpg">
            <div>特尔特鹿血酒单支500</div>
          </router-link>
          <router-link to class="bomrouter">
            <div class="bomnew">
              <div>￥188</div>
              <br>
              <div class="bom_sun">原价:200</div>
            </div>
            <img src="../../assets/1_6.png">
          </router-link>
        </li>
          <li class="boxlist">
          <router-link to>
            <img src="http://static.ruitaowang.com/attached/file/2019/04/23/20190423174503180.jpg">
            <div>特尔特鹿血酒单支500</div>
          </router-link>
          <router-link to class="bomrouter">
            <div class="bomnew">
              <div>￥188</div>
              <br>
              <div class="bom_sun">原价:200</div>
            </div>
            <img src="../../assets/1_6.png">
          </router-link>
        </li>
      </ul>
    </div>

   <!-- mint下拉刷新 -->
    <ul style="background:white;"
  v-infinite-scroll="loadMore"
  infinite-scroll-disabled="loading"
  infinite-scroll-distance="10">
  <li v-for="item in list" :key="item.length">{{ item }}</li>
    <div class="loading" v-if="loading">
         <span id="load-text">{{loadText}}</span>
      </div>
  </ul>
  </div>
</template>

<script>
import { InfiniteScroll } from "mint-ui";
export default {
  components: {
    [InfiniteScroll.name]: InfiniteScroll,
  },
  data() {
    return {
      list:[1,2,3,4],
      loading:false,
      loadText:'加载中....'
    };
  },
  mounted() {
    this.info();
  },
  methods: {
    loadMore() {
    console.log(9999)
    if(this.list.length>40){
      this.loading=true
      this.loadText='已加载全部数据'
    }else{
      this.loading=true
          setTimeout(() => {
        let last = this.list[this.list.length - 1];
        for (let i = 1; i <= 10; i++) {
          this.list.push(last + i);
        }
        this.loading = false;
      }, 2500);
    }
      
    },
    info() {},
    toplook() {},
    bomlook() {}
  }
};
</script>

<style scoped>
@import "../../assets/personal/css/new_product.css";
</style>
